<template>
  <div v-if="permissionsLists(80)">
    <!-- 头部 -->
    <page-header :title="$t('m.Media_library')" :has-return="false">
      <el-button type="primary" @click="addAds" v-if="permissionsLists(208)">
        <span>{{ $t('m.Upload_advertisement_file') }}</span>
      </el-button>
    </page-header>
    <div class="container">
      <div class="table_box">
        <div class="table_left webkit_scrollbars">
          <div class="table_left_div">
            <span class="table_left_span">{{
              $t('m.Advertising_groups')
            }}</span>
            <el-popover
              width="375"
              trigger="click"
              popper-class="el_popover"
              v-model="visible1"
            >
              <div style="margin-bottom:8px;color:#39404d;">
                {{ $t('m.Group_name') }}
              </div>
              <el-form ref="addParams1" :model="addParams" :rules="rules1">
                <el-form-item prop="title">
                  <el-input
                    :placeholder="$t('m.Enter_group_name')"
                    maxlength="50"
                    clearable
                    v-model="addParams.title"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div
                class="find_div search_btns"
                style="justify-content: end;margin:-8px 0 0;"
              >
                <div class="search_btn" @click="cancelAdd(2)">
                  {{ $t('m.cancel') }}
                </div>
                <div class="reset_btn" @click="confirmAdd">
                  {{ $t('m.confirm_') }}
                </div>
              </div>
              <img
                slot="reference"
                src="@/assets/imgs/setting/ic_add@2x.png"
                alt=""
                v-if="permissionsLists(207)"
                @click="cancelAdd(1)"
              />
            </el-popover>
          </div>
          <div
            class="table_left_group"
            :style="
              groupsList.length > 17 ? 'border-bottom: 1px solid #ececee' : ''
            "
            :class="{ active3: groupsList.length > 17 }"
          >
            <div
              class="table_left_group_div"
              v-for="(item, index) in groupsList"
              :class="{ active1: groupIndex == index }"
              :key="item.id"
              @click="choiceIndex(index, item)"
            >
              <div :class="{ active1: groupIndex == index }">
                <eltooltip
                  :content="
                    item.defaulted ? $t('m.All_advertisements') : item.title
                  "
                ></eltooltip>
              </div>
              <span>({{ item.totalCount }})</span>
            </div>
          </div>
        </div>
        <div class="table-box">
          <div style="display: flex;align-items:center; margin-bottom: 12px;">
            <div class="ground_name">
              {{
                groupItem.defaulted
                  ? $t('m.All_advertisements')
                  : groupItem.title
              }}
            </div>
            <el-popover
              width="375"
              trigger="click"
              popper-class="el_popover"
              v-model="visible2"
            >
              <div style="margin-bottom:8px;color:#39404d;">
                {{ $t('m.Group_name') }}
              </div>
              <el-form ref="addParams2" :model="addParams" :rules="rules1">
                <el-form-item prop="title">
                  <el-input
                    :placeholder="$t('m.Enter_group_name')"
                    maxlength="50"
                    clearable
                    v-model="addParams.title"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div
                class="find_div search_btns"
                style="justify-content: space-between;margin:-8px 0 0;"
              >
                <div>
                  <div
                    class="search_btn change_btn"
                    @click="
                      delDialog = true
                      visible2 = false
                    "
                  >
                    {{ $t('m.Delete_group') }}
                  </div>
                </div>
                <div style="display: flex;">
                  <div class="search_btn" @click="cancelEdit(2)">
                    {{ $t('m.cancel') }}
                  </div>
                  <div class="reset_btn" @click="confirmEdit">
                    {{ $t('m.confirm_') }}
                  </div>
                </div>
              </div>
              <img
                slot="reference"
                src="@/assets/imgs/setting/ic_edit@2x.png"
                alt=""
                style="width: 16px;height: 16px;cursor: pointer;"
                v-show="
                  groupItem && !groupItem.defaulted && permissionsLists(207)
                "
                @click="cancelEdit(1)"
              />
            </el-popover>
          </div>
          <div class="list_div">
            <div class="page_list_div" style="padding:0 0 8px 0;">
              <el-form class="page_list_top" label-position="right">
                <el-form-item
                  :label="$t('m.search_') + ':'"
                  class="page_list_top"
                >
                  <el-input
                    prefix-icon="el-icon-search"
                    style="width:250px;"
                    clearable
                    :placeholder="$t('m.Program_titles')"
                    v-model="params.search"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('m.Media_type') + ':'"
                  class="page_list_top"
                >
                  <el-select
                    v-model="params.fileType"
                    :placeholder="$t('m.pleaseChoose')"
                    ref="select1"
                    @change="searchBtn(1)"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  :label="$t('m.Release_status') + ':'"
                  class="page_list_top"
                >
                  <el-select
                    v-model="params.state"
                    :placeholder="$t('m.pleaseChoose')"
                    ref="select2"
                    @change="searchBtn(2)"
                  >
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  :label="$t('m.Program_status') + ':'"
                  class="page_list_top"
                >
                  <el-select
                    v-model="params.linkState"
                    :placeholder="$t('m.pleaseChoose')"
                    ref="select3"
                    @change="searchBtn(3)"
                  >
                    <el-option
                      v-for="item in options3"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item class="page_list_top page_list_search">
                  <el-button
                    class="search_button reset_button"
                    @click="searchBtn()"
                    >{{ $t('m.search_') }}</el-button
                  >
                </el-form-item>
                <el-form-item class="page_list_top page_list_search">
                  <el-button class="reset_button" @click="refreshBtn">{{
                    $t('m.refresh')
                  }}</el-button>
                </el-form-item>
                <el-form-item class="page_list_top page_list_search">
                  <el-button
                    class="reset_button"
                    @click="batchBtn"
                    v-if="permissionsLists(213)"
                    >{{ $t('m.Remove_batch') }}</el-button
                  >
                </el-form-item>
                <el-form-item class="page_list_top">
                  <el-popover
                    width="220"
                    trigger="click"
                    popper-class="el_popover_btn"
                    v-model="visible3"
                    :disabled="groupsList.length < 2"
                  >
                    <div class="el_popover_btn_top">
                      {{ $t('m.Select_group') }}
                    </div>
                    <div class="webkit_scrollbars">
                      <div
                        class="el_popover_btn_bottom"
                        :class="{ active3: options4.length > 9 }"
                      >
                        <div
                          class="el_popover_btn_active"
                          v-for="(item, index) in options4"
                          :key="item.value"
                          v-show="item.value != groupItem.id"
                          @click="toBatch(item.value, 1)"
                        >
                          <div
                            class="el_popover_bottom_div"
                            :class="{
                              active2:
                                index != options4.length - 1 &&
                                item.value != groupItem.id > 0
                            }"
                          >
                            <eltooltip
                              :content="
                                item.defaulted
                                  ? $t('m.All_advertisements')
                                  : item.label
                              "
                            ></eltooltip>
                          </div>
                        </div>
                        <div
                          class="el_popover_btn_active el_popover_btn_active2"
                          v-show="options4.length == 0"
                        >
                          <div
                            class="el_popover_bottom_div"
                            style="color: var(--text-color);margin-left:20px;"
                          >
                            {{ $t('m.noData') }} ~
                          </div>
                        </div>
                      </div>
                    </div>
                    <el-button
                      class="reset_button"
                      slot="reference"
                      v-if="permissionsLists(212)"
                      v-show="groupsList.length > 1"
                      @click="groupsList.length > 1 ? changeBatch() : ''"
                      >{{ $t('m.Modify_group_batch') }}</el-button
                    >
                  </el-popover>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!--表格-->
          <div class="el_table_div" style="padding:0;">
            <el-table
              :data="programLists"
              :row-key="getAdsId"
              ref="adsId"
              @selection-change="handleSelectionChange"
            >
              <emptydata slot="empty" v-if="programLists.length == 0" />
              <el-table-column
                type="selection"
                width="56"
                :reserve-selection="true"
                fixed="left"
              >
              </el-table-column>
              <el-table-column
                :label="$t('m.Program_content')"
                prop="id"
                min-width="88"
                fixed="left"
              >
                <template #default="scope">
                  <span v-if="scope.row.fileType == 1">
                    <el-image
                      :src="fileUrlFormat(scope.row.url1)"
                      alt=""
                      :preview-src-list="[fileUrlFormat(scope.row.url1)]"
                      class="el_img"
                      fit="cover"
                    />
                  </span>
                  <span v-else class="video_span">
                    <video
                      :src="fileUrlFormat(scope.row.url1)"
                      class="el_video"
                    ></video>
                    <img
                      src="@/assets/imgs/ic_play@2x.png"
                      alt=""
                      class="el_video_img"
                      @click="playVideo(scope.row.url1)"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Program_titles')"
                prop="title"
                show-overflow-tooltip
                min-width="150"
              >
              </el-table-column>
              <el-table-column
                :label="$t('m.Advertising_file_size')"
                prop="fileSize"
                show-overflow-tooltip
                min-width="120"
              >
                <template #default="scope">
                  <div>{{ $format.formatBytest(scope.row.fileSize) }}</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.status')"
                prop="state"
                min-width="150"
              >
                <template #default="scope">
                  <el-switch
                    active-color="var(--text-color)"
                    inactive-color="#d2d8e2"
                    :active-value="1"
                    :inactive-value="2"
                    :value="scope.row.state"
                    :disabled="!permissionsLists(211)"
                    @click.native="
                      permissionsLists(211) ? changeState(scope.row) : ''
                    "
                  >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Upload_time')"
                prop="createTime"
                min-width="180"
              >
                <template #default="scope">
                  <span> {{ scope.row.createTime | dateformat }}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Users_Details_Operation')"
                width="108"
                fixed="right"
                v-if="isArrayEqual([208, 209, 210], permissionsLists)"
              >
                <template #default="scope">
                  <div style="display:flex;justify-content: center;">
                    <el-popover
                      width="220"
                      popper-class="el_popover_btn"
                      :ref="`popover1` + scope.$index"
                      placement="left-start"
                      :disabled="groupsList.length < 2"
                    >
                      <!-- <div class="el_popover_btn_top">
                        {{ $t('m.Select_group') }}
                      </div> -->
                      <div class="webkit_scrollbars">
                        <div
                          class="el_popover_btn_bottom"
                          :class="{ active3: options4.length > 9 }"
                        >
                          <div
                            class="el_popover_btn_active"
                            v-for="(item, index) in options4"
                            :key="item.value"
                            v-show="
                              item.value != groupItem.id &&
                                permissionsLists(210)
                            "
                            @click="toBatch(item.value, 2)"
                          >
                            <div
                              class="el_popover_bottom_div"
                              :class="{
                                active2:
                                  index != options4.length - 1 &&
                                  item.value != groupItem.id > 0
                              }"
                            >
                              <eltooltip
                                :content="
                                  item.defaulted
                                    ? $t('m.All_advertisements')
                                    : item.label
                                "
                              ></eltooltip>
                            </div>
                          </div>
                          <div
                            class="el_popover_btn_active el_popover_btn_active2"
                            v-show="options4.length == 0"
                          >
                            <div
                              class="el_popover_bottom_div"
                              style="color: var(--text-color);margin-left:20px;"
                            >
                              {{ $t('m.noData') }} ~
                            </div>
                          </div>
                        </div>
                      </div>
                      <div slot="reference">
                        <img
                          v-show="
                            groupsList.length > 1 && permissionsLists(210)
                          "
                          src="@/assets/imgs/ic_group.svg"
                          alt=""
                          style="height:24px !important;width:28px !important;margin-right:12px; cursor: pointer;"
                          @click="
                            groupsList.length > 1
                              ? changeGroup(scope.row, scope.$index)
                              : ''
                          "
                        />
                      </div>
                    </el-popover>

                    <el-dropdown>
                      <img
                        :src="
                          groupsList.length > 1
                            ? require('@/assets/imgs/ic_operation2.svg')
                            : require('@/assets/imgs/ic_operation.svg')
                        "
                        alt=""
                        class="dropdown_img"
                        :style="
                          groupsList.length > 1
                            ? 'height:24px !important;width:28px !important;'
                            : ''
                        "
                      />
                      <el-dropdown-menu
                        slot="dropdown"
                        style="white-space: nowrap !important;"
                      >
                        <span>
                          <el-dropdown-item
                            @click.native="getDetail(scope.row)"
                            v-if="permissionsLists(208)"
                            >{{ $t('m.branch_Edit') }}</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click.native="toView(scope.row)"
                            v-if="scope.row.linkState == 1"
                            >{{ $t('m.View') }}</el-dropdown-item
                          >
                          <el-dropdown-item
                            v-if="
                              scope.row.linkState == 0 && permissionsLists(209)
                            "
                            @click.native="delADs(scope.row)"
                            >{{ $t('m.delete') }}</el-dropdown-item
                          >
                        </span>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页 -->
          <pagination
            :total="total1"
            :current="params.pageNum"
            :size="params.pageSize"
            @changePageSize="handleSizeChange"
            @changePageNum="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 批量导入文件 / 编辑单个文件 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="importDialog"
      width="640px"
      append-to-body
      :title="
        dialogType == 1
          ? $t('m.Upload_advertisement_file')
          : $t('m.Modify_advertisements')
      "
      custom-class="uploadLog"
    >
      <div class="el_dialog_center">
        <div
          v-if="dialogType == 1"
          class="el_dialog_title1"
          style="font-size:14px;line-height:16px;font-weight:500;"
        >
          {{ $t('m.Select_group') }}*
        </div>
        <div v-if="dialogType == 1">
          <el-select v-model="adsDetail.groupId" style="width:286px;">
            <el-option
              v-for="item in options4"
              :key="Number(item.value)"
              :label="item.defaulted ? $t('m.All_advertisements') : item.label"
              :value="Number(item.value)"
            >
            </el-option>
          </el-select>
        </div>
        <div
          v-if="dialogType == 2"
          class="el_dialog_title1"
          style="font-size:14px;line-height:16px;font-weight:500;"
        >
          {{ $t('m.Program_titles') }}*
        </div>
        <el-form
          v-if="dialogType == 2"
          class="el_form_upload"
          :model="adsDetail"
          :rules="rules2"
          ref="adsDetail"
        >
          <el-form-item prop="title">
            <el-input
              class="el_input"
              v-model="adsDetail.title"
              maxlength="50"
              style="width:286px;"
              :placeholder="$t('m.Please_enter')"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div class="el_uploaded2">
              <div class="el_uploaded_img">
                <el-image
                  v-if="adsDetail.fileType == 1"
                  :src="
                    playType == 1 ? fileUrlFormat(adsDetail.url) : adsDetail.url
                  "
                  :preview-src-list="[
                    playType == 1 ? fileUrlFormat(adsDetail.url) : adsDetail.url
                  ]"
                  alt=""
                  class="image_vertical"
                  fit="cover"
                />
                <video
                  v-else
                  :src="
                    playType == 1 ? fileUrlFormat(adsDetail.url) : adsDetail.url
                  "
                  class="image_vertical"
                ></video>
                <img
                  src="@/assets/imgs/ic_play@2x.png"
                  alt=""
                  class="video_img"
                  v-show="adsDetail.fileType == 2"
                  @click="playVideo(adsDetail.url)"
                />
              </div>
              <div class="el_uploaded_right">
                <el-upload
                  ref="upload"
                  :action="'/manage/adverts/update'"
                  :data="{
                    groupId: adsDetail.groupId,
                    id: adsDetail.id,
                    title: adsDetail.title
                  }"
                  :headers="platformId"
                  :on-change="changeList"
                  :on-success="onSuccess2"
                  :on-error="onError2"
                  :before-upload="beforeUpload2"
                  name="files"
                  :show-file-list="false"
                  :auto-upload="false"
                  :file-list="fileList"
                  :accept="
                    adsDetail.fileType == 1
                      ? 'image/jpeg,image/png,image/webp'
                      : 'video/mp4'
                  "
                >
                  <el-button class="el_button" @click="uploadBtn">{{
                    $t('m.Replace_file')
                  }}</el-button>
                </el-upload>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <el-upload
          class="el_upload el_upload2"
          drag
          action="/manage/adverts/files/upload"
          name="files"
          :on-change="handleChange"
          :on-success="onSuccess"
          :on-error="onError"
          :before-upload="beforeUpload"
          :headers="platformId"
          :multiple="true"
          :data="{ groupId: adsDetail.groupId }"
          :show-file-list="false"
          :file-list="fileList"
          v-if="dialogType == 1"
        >
          <div>
            <img
              src="@/assets/imgs/ic_add.svg"
              alt=""
              class="el_upload_img"
              style="margin-top:30px"
            />
            <div class="el_upload_title">
              {{ $t('m.Upload_files_text') }}
            </div>
          </div>
        </el-upload>
        <div
          class="el_dialog_center_bottom"
          :style="dialogType == 1 ? 'margin-bottom:8px;' : ''"
          v-show="
            dialogType == 1 || (dialogType == 2 && adsDetail.fileType == 2)
          "
        >
          {{ $t('m.Upload_video_text') }}
        </div>
        <div
          class="el_dialog_center_bottom"
          v-show="
            dialogType == 1 || (dialogType == 2 && adsDetail.fileType == 1)
          "
        >
          {{ $t('m.Upload_img_text') }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="dialogType == 2">
        <el-button @click="editAds()" class="cancel_btn confirm_btn">{{
          $t('m.save')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 查看关联的节目单 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="programDialog"
      :title="$t('m.View_program_listings')"
      width="700px"
      append-to-body
    >
      <div class="el_dialog_center">
        <div
          class="table-box el_table_div"
          style="min-width: 0px;margin-top:0;"
        >
          <el-table :data="playerLists" style="width:100%;">
            <emptydata slot="empty" v-if="playerLists.length == 0" />
            <el-table-column :label="$t('m.program_title')" min-width="135">
              <template #default="scope">
                {{ scope.row.title | strFormat }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.Numb_of_stations')" min-width="135">
              <template #default="scope">
                {{
                  scope.row.deliveryCount
                    ? scope.row.deliveryCount.totalCount
                    : 0
                }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.Delivery_status')" min-width="135">
              <template #default="scope">
                <span v-if="scope.row.deliveryState == 1">
                  <div>
                    {{ $t('m.uploadSuccess') }}:
                    {{ scope.row.deliveryCount.successCount }}
                  </div>
                  <div>
                    {{ $t('m.uploadFailure') }}:
                    {{ scope.row.deliveryCount.failureCount }}
                  </div>
                </span>
                <span
                  v-else
                  :style="
                    scope.row.deliveryState == 2
                      ? 'color:#4ce48a;'
                      : scope.row.deliveryState == 0
                      ? 'color:#ffc855;'
                      : 'color:#ff605a;'
                  "
                >
                  {{ scope.row.deliveryState | valFormat(options5) }}
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="block el_dialog_center_page"
            v-show="playerLists.length > 0"
          >
            <el-pagination
              @current-change="handleCurrentChange2"
              :current-page.sync="programParams.pageNum"
              :page-size.sync="programParams.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total2"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="programDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button
          @click="programDialog = false"
          class="cancel_btn confirm_btn"
          >{{ $t('m.confirm_') }}</el-button
        >
      </span>
    </el-dialog>

    <!-- 关闭节目 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="closeDialog"
      :title="$t('m.Delete_warning')"
      width="560px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.After_turning_off') }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="closeBtn" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 删除广告 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="deleteDialog"
      :title="$t('m.Delete_advertisement')"
      width="560px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.Sure_delete_advertisement') }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="deleteBtn" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 删除分组 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="delDialog"
      :title="$t('m.Sure_delete_group')"
      width="560px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.Sure_delete_group_text') }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="delAds" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 查看视频 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="playDialog"
      :title="$t('m.play_video')"
      width="640px"
      append-to-body
      @close="closePlay"
    >
      <div class="el_dialog_center">
        <video
          :src="playType == 1 ? fileUrlFormat(urlVideo) : urlVideo"
          controls="controls"
          autoplay="autoplay"
          class="play_video"
        ></video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from '@/components/pagination.vue'

export default {
  components: { pagination },
  // mixins: [share],
  data () {
    return {
      params: {
        search: '',
        fileType: '',
        groupId: '',
        state: '',
        linkState: '',
        pageNum: 1,
        pageSize: 10
      }, //搜索参数
      lang: this.$t('m'),
      programLists: [], //机柜广告
      total1: 0,
      chooseList: {
        advertIds: [], //广告ID集合
        groupId: null //广告分组id
      },
      addList: {
        fileType: '1',
        title: '',
        remark: '',
        playTime: '',
        id: '',
        url1: ''
      },
      urlVideo: '',
      programDialog: false,
      playDialog: false,
      options1: [
        { value: '', label: this.$t('m.all') },
        { value: 1, label: this.$t('m.program_img') },
        { value: 2, label: this.$t('m.program_Video') }
      ],
      options2: [
        { value: '', label: this.$t('m.all') },
        { value: 1, label: this.$t('m.Program_on') },
        { value: 2, label: this.$t('m.Program_off') }
      ],
      options3: [
        { value: '', label: this.$t('m.all') },
        { value: 0, label: this.$t('m.Available_link') },
        { value: 1, label: this.$t('m.Program_linked') }
      ],
      options5: [
        { value: '', label: this.$t('m.all') },
        { value: 0, label: this.$t('m.Pending_deliver') },
        { value: 1, label: this.$t('m.Partially_deliver') },
        { value: 2, label: this.$t('m.Program_delivered') },
        { value: 3, label: this.$t('m.Program_Failed') }
      ],
      importDialog: false,
      deleteDialog: false,
      closeDialog: false,
      fileList: [],
      groupsList: [], //广告组
      groupItem: '', //广告组对象
      groupIndex: 0, //广告组index
      visible1: false,
      visible2: false,
      visible3: false,
      addParams: {
        id: null,
        title: ''
      }, //广告组新增
      rules1: {
        title: [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ]
      },
      delDialog: false,
      options4: [],
      adStore: {
        remainCount: '0.0',
        totalCount: '0.0',
        usedCount: '0.0'
      },
      refName: '',
      selection: [],
      rowData: '',
      dialogType: 1,
      deleteType: '',
      adsDetail: {
        fileType: '', //	文件类型：1-图片 2-视频
        groupId: '', //	组ID
        id: null, //	主键id
        title: '', //	标题
        url: ''
      },
      rules2: {
        title: [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ]
      },
      platformId: {
        'platform-id': parseInt(
          (this.$cache.get('platformId'))
        ),
        add: this.$cache.getLang(),
        'brezze-language':
          this.$cache.getLang() == 'CN' ? 'ZH' : this.$cache.getLang()
      }, //导入请求头
      playType: 1,
      programParams: {
        advertId: '',
        pageNum: 1,
        pageSize: 10
      },
      playerLists: [],
      total2: 0,
      adstId: [],
      loading: false,
      itemDate: '',
      permissionsIds: []
    }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(80)) {
      return
    }
    // this.getStore()
    this.getADsGroup()
    this.getOption()
    // this.getList()
  },
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },

    //存储统计
    getStore () {
      this.$api.ad.adsStore().then(res => {
        if (res.code == 0) {
          this.adStore = res.data
        }
      })
    },

    //广告组-获取全部
    getADsGroup () {
      this.$api.ad.getADsGroups().then(res => {
        if (res.code == 0) {
          this.groupIndex = this.params.groupIndex ? this.params.groupIndex : 0
          this.groupItem = this.params.groupIndex
            ? res.data[this.params.groupIndex]
            : res.data[0]
          this.groupsList = res.data
          this.getList()
        }
      })
    },

    //刷新广告组
    getADsGroup1 (e) {
      this.$api.ad.getADsGroups().then(res => {
        if (res.code == 0) {
          this.groupsList = res.data
          e
            ? (this.groupItem = this.groupsList.find(
                item => item.id == this.groupItem.id
              ))
            : ''
        }
      })
    },

    //选择广告组
    choiceIndex (index, item) {
      this.refName = ''
      this.groupIndex = index
      this.groupItem = item
      this.programLists = []
      this.total1 = 0
      this.refreshBtn()
    },
    //取消新增
    cancelAdd (e) {
      this.$refs.addParams1.resetFields()
      this.addParams = this.$options.data.call(this).addParams
      if (e == 2) {
        this.visible1 = false
      }
    },
    //确定新增
    confirmAdd () {
      this.$refs['addParams1'].validate(valid => {
        if (valid) {
          this.$api.ad.addADsGroup(this.addParams).then(res => {
            if (res.code == 0) {
              this.$message.success(res.message)
              this.getADsGroup1()
              this.cancelAdd(2)
              this.getOption()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    //取消编辑
    cancelEdit (e) {
      // console.log(this.groupItem);
      if (this.groupItem.defaulted) {
        this.visible2 = false
        return
      }
      this.$refs.addParams2.resetFields()
      if (e == 2) {
        this.visible2 = false
      } else {
        this.addParams.id = this.groupItem.id
        this.addParams.title = this.groupItem.title
      }
    },
    //确定编辑
    confirmEdit () {
      this.$refs['addParams2'].validate(valid => {
        if (valid) {
          this.$api.ad.editADsGroup(this.addParams).then(res => {
            if (res.code == 0) {
              this.$message.success(res.message)
              this.getADsGroup1(1)
              this.cancelEdit(2)
              this.getOption()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    //删除广告组
    delAds () {
      this.$api.ad.delADsGroup(this.addParams).then(res => {
        if (res.code == 0) {
          this.$message.success(res.message)
          this.remPageNum()
          this.getADsGroup()
          this.getOption()
          this.delDialog = false
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //广告组-下拉选项
    getOption () {
      this.$api.ad.optionADsGroup().then(res => {
        if (res.code == 0) {
          this.options4 = res.data
          this.adsDetail.groupId = res.data[0].value
        }
      })
    },

    //机柜广告-获取对象列表
    getList () {
      this.params.groupId = this.groupItem.id
      this.$api.ad.programsList(this.params).then(res => {
        if (res.code == 0) {
          this.programLists = res.data.records
          this.total1 = res.data.total
        }
      })
    },
    //切换页大小
    handleSizeChange (val) {
      this.params.pageSize = val
      this.getList()
    },
    //切换页
    handleCurrentChange (val) {
      this.params.pageNum = val
      this.getList()
    },

    //搜索-广告列表
    searchBtn (e) {
      this.params.pageNum = 1
      this.$nextTick(() => {
        e ? this.$refs[`select${e}`].blur() : ''
      })
      this.clearTable()
      this.remPageNum()
      this.getList()
    },

    //重置-广告列表
    refreshBtn () {
      this.clearTable()
      this.params = this.$options.data.call(this).params
      this.remPageNum()
      this.getList()
    },

    //查看节目单
    toView (item) {
      this.programParams.advertId = item.id
      this.$api.ad.getPrograms(this.programParams).then(res => {
        if (res.code == 0) {
          this.playerLists = res.data.records
          this.total2 = res.data.total
          this.programDialog = true
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getPrograms () {
      this.$api.ad.getPrograms(this.programParams).then(res => {
        if (res.code == 0) {
          this.playerLists = res.data.records
          this.total2 = res.data.total
        }
      })
    },
    handleCurrentChange2 (val) {
      this.programParams.pageNum = val
      this.getPrograms()
    },

    // 广告id
    getAdsId (row) {
      return row.id
    },

    // 选中的广告行
    handleSelectionChange (e) {
      this.chooseList.advertIds = e.map(item => item.id)
      // console.log(this.chooseList.advertIds)
    },

    //不给选中
    checkDisable (row) {
      if (row.linkState == 0) {
        return 1
      } else {
        return 0
      }
    },

    //处理单行选中回填
    selectRow (row) {
      this.$refs.adsId.toggleRowSelection(row)
    },
    toggleRowSelection (row) {
      const selected = this.selection.indexOf(row)
      if (selected > -1) {
        this.selection.splice(selected, 1)
      } else {
        this.selection.push(row)
      }
    },

    //批量删除
    batchBtn () {
      if (this.chooseList.advertIds.length == 0) {
        this.$message.error(this.$t('m.Please_selec_advertisement'))
        return
      } else {
        this.deleteType = 2
        this.deleteDialog = true
      }
    },

    //批量更改分组
    changeBatch () {
      if (this.chooseList.advertIds.length == 0) {
        this.$message.error(this.$t('m.Please_selec_advertisement'))
        setTimeout(() => {
          this.visible3 = false
        }, 0)
        return
      }
      // this.getOption()
    },

    // 清空选中的广告
    clearTable () {
      this.chooseList = this.$options.data.call(this).chooseList
      this.adstId = []
      this.$refs.adsId.clearSelection()
    },

    //单个修改分组
    changeGroup (item, index) {
      // this.clearTable()
      // this.selectRow(item)
      // console.log(item,index);
      // this.refName = 'popover1' + index
      // console.log(this.refName);
      // this.$refs[this.refName].doShow()
      this.adstId = [item.id]
      // this.getOption()
    },

    //更改分组-批量
    toBatch (item, e) {
      this.chooseList.groupId = item
      if (e == 1) {
        this.visible3 = false
      } else {
        this.chooseList.advertIds = [...this.adstId]
        // this.$refs[this.refName].doClose()
        document.body.click()
      }
      this.$api.ad.changeBatchs(this.chooseList).then(res => {
        if (res.code == 0) {
          this.$message.success(res.message)
          this.getADsGroup1()
          this.getList()
          this.clearTable()
          this.refName = ''
          this.selection = []
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //打开单个删除弹窗
    delADs (item) {
      this.rowData = item
      this.deleteType = 1
      this.deleteDialog = true
    },

    //确定单个删除
    deleteBtn () {
      if (this.deleteType == 1) {
        this.$api.ad.deleteADs(this.rowData.id).then(res => {
          if (res.code == 0) {
            this.$message.success(res.message)
            this.deleteDialog = false
            this.getList()
            this.getADsGroup1()
            // this.getStore()
          } else {
            this.$message.error(res.message)
            this.deleteDialog = false
          }
        })
      }
      if (this.deleteType == 2) {
        let params = {
          advertIds: []
        }
        params.advertIds = this.chooseList.advertIds
        this.$api.ad.deleteADsBatch(params).then(res => {
          if (res.code == 0) {
            this.$message.success(res.message)
            this.deleteDialog = false
            this.params.pageNum = 1
            this.getList()
            this.getADsGroup1()
            // this.getStore()
            this.clearTable()
          } else {
            this.$message.error(res.message)
            this.deleteDialog = false
          }
        })
      }
    },

    //获取详情
    getDetail (item) {
      // this.loading = false
      // this.$api.ad.getAdDetail(item.id).then(res => {
      //   if (res.code == 0) {
      //     this.adsDetail = res.data
      //     this.adsDetail.groupId = res.data.groupId
      //       ? res.data.groupId
      //       : this.groupItem.id
      //     this.dialogType = 2
      //     this.playType = 1
      //     this.importDialog = true
      //     this.fileList = []
      //     this.$nextTick(() => {
      //       this.$refs['adsDetail'].clearValidate(['title'])
      //     })
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // })
      this.params.groupIndex = this.groupIndex
      this.setPageNum(this.params.pageNum, this.params.pageSize, this.params)
      this.$router.push({ path: '/ads/program-create', query: { id: item.id } })
    },

    //编辑广告
    editAds () {
      this.$refs['adsDetail'].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.fileList.length > 0) {
            try {
              this.$refs.upload.submit()
            } catch (error) {
              this.$message.error(error)
            }
          } else {
            this.$api.ad.editADs(this.adsDetail).then(res => {
              if (res.code == 0) {
                this.loading = false
                this.$message.success(res.message)
                this.playType = 1
                this.importDialog = false
                this.getList()
                // this.getStore()
                this.getADsGroup1()
              } else {
                this.$message.error(res.message)
                this.loading = false
              }
            })
          }
        } else {
          return false
        }
      })
    },

    //添加广告
    addAds () {
      // this.adsDetail = this.$options.data.call(this).adsDetail
      // this.adsDetail.groupId = this.groupItem.id
      // this.importDialog = true
      // this.loading = false
      // this.dialogType = 1
      // this.fileList = []
      this.params.groupIndex = this.groupIndex
      this.setPageNum(this.params.pageNum, this.params.pageSize, this.params)
      this.$router.push({ path: '/ads/program-create' })
    },

    //文件状态改变
    handleChange (file, fileList) {
      // this.fileList = fileList
    },

    //上传成功回调
    onSuccess (res, file, fileList) {
      this.loading = false
      let resData = res
      this.$message({
        type: resData.code == '0' ? 'success' : 'error',
        message: resData.message
      })
      this.getList()
      // this.getStore()
      this.getADsGroup1()
      this.importDialog = false
    },

    //上传失败
    onError (res, file, fileList) {
      this.loading = false
    },
    onError2 (res, file, fileList) {
      this.loading = false
    },

    //上传广告前限制
    beforeUpload (file) {
      // console.log(file)
      const isLt20M = file.size / 1024 / 1024 < 20
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/webp' ||
        file.type === 'image/png' ||
        file.type === 'video/mp4'
      if (!isLt20M) {
        setTimeout(() => {
          this.$notify({
            title: file.name + ' ' + this.$t('m.Upload_failed'),
            message: this.$t('m.File_size_mb'),
            type: 'warning',
            duration: 3000
          })
        }, 0)
        return false
      }
      if (!isJPG) {
        setTimeout(() => {
          this.$notify({
            title: file.name + ' ' + this.$t('m.Upload_failed'),
            message: this.$t('m.Incorrect_file_format'),
            type: 'warning',
            duration: 3000
          })
        }, 0)
        return false
      }
      this.loading = true
      return true
    },
    //上传广告前限制
    beforeUpload2 (file) {
      // console.log(file)
      const isLt20M = file.size / 1024 / 1024 < 20
      const isJPG1 =
        file.type === 'image/jpeg' ||
        file.type === 'image/webp' ||
        file.type === 'image/png'
      const isJPG2 = file.type === 'video/mp4'
      if (!isLt20M) {
        setTimeout(() => {
          this.$notify({
            title: file.name + ' ' + this.$t('m.Upload_failed'),
            message: this.$t('m.File_size_mb'),
            type: 'warning',
            duration: 3000
          })
        }, 0)
        return false
      }
      let isJPG = this.adsDetail.fileType == 1 ? isJPG1 : isJPG2
      // console.log(isJPG, isJPG1, isJPG2, file.type)
      if (!isJPG) {
        setTimeout(() => {
          this.$notify({
            title: file.name + ' ' + this.$t('m.Upload_failed'),
            message: this.$t('m.Incorrect_file_format'),
            type: 'warning',
            duration: 3000
          })
        }, 0)
        return false
      }
      this.loading = true
      return true
    },
    //图片/视频改变
    changeList (file, fileList) {
      // console.log(file.raw)
      const isLt20M = file.raw.size / 1024 / 1024 < 20
      const isJPG1 =
        file.raw.type === 'image/jpeg' ||
        file.raw.type === 'image/webp' ||
        file.raw.type === 'image/png'
      const isJPG2 = file.raw.type === 'video/mp4'
      if (!isLt20M) {
        setTimeout(() => {
          this.$notify({
            title: file.name + ' ' + this.$t('m.Upload_failed'),
            message: this.$t('m.File_size_mb'),
            type: 'warning',
            duration: 3000
          })
        }, 0)
        return false
      }
      let isJPG = this.adsDetail.fileType == 1 ? isJPG1 : isJPG2
      // console.log(isJPG, isJPG1, isJPG2, file.raw.type)
      if (!isJPG) {
        setTimeout(() => {
          this.$notify({
            title: file.name + ' ' + this.$t('m.Upload_failed'),
            message: this.$t('m.Incorrect_file_format'),
            type: 'warning',
            duration: 3000
          })
        }, 0)
        return false
      }
      this.playType = 2
      let newFile = new FormData()
      newFile.append('file', file.raw)
      if (fileList.length > 1) {
        fileList.splice(0, 1)
        newFile.delete('file')
        newFile.append('file', fileList[0].raw)
      }
      //给图片src赋值
      this.adsDetail.url = URL.createObjectURL(file.raw)
      this.fileList = fileList
      // console.log(this.fileList);
    },
    onSuccess2 (res, file, fileList) {
      this.loading = false
      let resData = res
      this.$message({
        type: resData.code == '0' ? 'success' : 'error',
        message: resData.message
      })
      this.playType = 1
      this.importDialog = false
      this.getList()
      // this.getStore()
      this.getADsGroup1()
    },

    //调起页面
    uploadBtn () {},

    //播放视频
    playVideo (item) {
      this.urlVideo = item
      this.playDialog = true
    },
    //关闭视频
    closePlay () {
      this.playDialog = false
      this.urlVideo = ''
    },

    //编辑状态
    changeState (item) {
      if (item.state == 1) {
        this.itemDate = item
        this.closeDialog = true
        return
      }

      let params = {
        id: item.id,
        state: item.state == 1 ? 2 : 1
      }
      this.$api.ad.editState(params).then(res => {
        if (res.code == 0) {
          this.$message.success(res.message)
          this.getList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    closeBtn () {
      let params = {
        id: this.itemDate.id,
        state: this.itemDate.state == 1 ? 2 : 1
      }
      this.$api.ad.editState(params).then(res => {
        if (res.code == 0) {
          this.$message.success(res.message)
          this.closeDialog = false
          this.getList()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style>
.el_popover {
  padding: 20px 24px !important;
  border-radius: 10px !important;
}
.el_popover_btn {
  border-radius: 10px !important;
  padding: 0 !important;
}
.el_popover .el-input__inner {
  height: 36px !important;
  border-radius: 4px;
  line-height: 36px;
  font-size: 12px;
  border: 1px solid #e4e4e6;
  font-weight: 500;
  text-align: left;
  color: #646b80;
  /* padding-left: 10px !important; */
}

.el_popover .el-input__icon {
  line-height: 36px;
  height: 36px;
}
</style>
<style scoped lang="scss">
.find_div {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-right: 20px;
  height: 48px;
}
.search_btn {
  min-width: 84px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #d2d8e2;
  border-radius: 4px;

  cursor: pointer;

  opacity: 0.8;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--text-color);
  line-height: 36px;
}

.reset_btn {
  min-width: 84px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #d2d8e2;
  border-radius: 4px;

  margin-left: 12px !important;
  cursor: pointer;

  opacity: 0.8;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--text-color);
  line-height: 36px;
}
.loading_relative {
  position: initial !important;
}
.btn_create {
  // margin-right: 8px;
  padding: 8px 20px;
  background: #ffffff;
  border: 1px solid #d2d8e2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn_create:hover {
  border: 1px solid rgba(128, 44, 182, 0.4);
}
.btn_create img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.btn_create span {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--text-color);
  line-height: 16px;
}

// .page-header {
//   min-width: 1172px;
// }

.change_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  line-height: inherit;
}

.table_box {
  min-width: 1092px;
  display: flex;
  background: #ffffff;
  border-radius: 10px;
  .table-box {
    min-width: 872px;
    flex: 1;
    padding: 20px 24px;
    .ground_name {
      font-size: 16px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 22px;
      margin-right: 12px;
    }
  }
  .table_left {
    width: 220px;
    min-width: 220px;
    border-right: 1px solid #ececee;
    .table_left_div {
      padding: 20px;
      border-bottom: 1px solid #ececee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .table_left_span {
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 22px;
      }
      img {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
    .table_left_group {
      width: 219px;
      min-width: 219px;
      max-height: 680px;
      min-height: 380px;
      .table_left_group_div {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        div {
          width: 144px !important;
          font-size: 14px;
          font-weight: 500;
          text-align: left;
          color: #39404d;
          line-height: 16px;
        }

        span {
          font-size: 12px;
          font-weight: 500;
          text-align: right;
          color: #646b80;
          line-height: 14px;
        }
      }
      .table_left_group_div:hover {
        background: #f2f5fa;
        color: var(--text-color) !important;
        div {
          background: #f2f5fa;
          color: var(--text-color) !important;
        }
      }
      .active1 {
        background: #f2f5fa;
        color: var(--text-color) !important;
        ::v-deep .el-tooltip {
          color: var(--text-color) !important;
        }
      }
    }
  }
}

.active3 {
  overflow: hidden;
  overflow-y: scroll; //纵行超过隐藏
}

.search_input >>> .el-input__inner {
  width: 280px;
}

.el_img {
  max-width: 40px !important;
  height: 30px !important;
}
.el_video {
  width: 40px !important;
  height: 30px !important;
}
.el_video::-webkit-media-controls-enclosure {
  display: none;
}
.video_span {
  position: relative;
}
.el_video_img {
  position: absolute;
  width: 16px;
  height: 16px;
  cursor: pointer;
  z-index: 99;
  left: 12px;
  bottom: 10px;
}

.el_uploaded2 {
  display: flex;
  align-items: center;
  margin: 20px 0;
  .el_uploaded_img {
    width: 150px;
    height: 100px;
    background: #f5f5f7;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    position: relative;
    .image_vertical {
      max-width: 80px;
      height: 50px;
      border-radius: 2px;
    }
    .video_img {
      position: absolute;
      width: 20px;
      height: 20px;
      cursor: pointer;
      z-index: 99;
    }
  }
  .el_button {
    padding: 10px;
    min-width: 116px;
    background: #ffffff !important;
    border: 1px solid #d2d8e2 !important;
    border-radius: 4px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
  }
}
.el_popover_btn_top {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  color: #39404d;
  line-height: 22px;
  border-bottom: 1px solid #ececee;
}
.el_popover_btn_bottom {
  max-height: 327px;
  // overflow: hidden;
  // overflow-y: scroll;
  .el_popover_btn_active:hover {
    background: #f2f5fa;
  }
  .el_popover_btn_active2:hover {
    background: initial;
  }
  .el_popover_bottom_div {
    padding: 12px 16px 12px 0;
    margin-left: 16px;
    font-size: 14px;
    text-align: left;
    color: #39404d;
    line-height: 16px;
    cursor: pointer;
  }
  .el_popover_bottom_div:hover {
    color: var(--text-color) !important;
  }
  .active2 {
    border-bottom: 1px solid #ececee;
  }
}
</style>
